import React from 'react';
import {ScrollView, View, Text, Image} from 'react-native';
import ThemeStyles from '../../styles';
import Styles from './styles';
import {bindActionCreators} from 'redux';
import * as registerActionCreator from '../../actions/register-action';
import {connect} from 'react-redux';
import {UserType} from '../../reducers/user';
import Toast from '../../components/toast';
import {getRealSize, Touchable} from '../../utils';
import Button from '../../components/button';
import Validator from 'async-validator';
import {I18n} from '../../reducers/intl';

class SelectRoleScreen extends React.Component {
  static navigationOptions = ({navigation}) => ({
    title: I18n.t('page.title.role'),
    headerLeft: () => (
      <Touchable onPress={() => navigation.popToTop()}>
        <View style={[ThemeStyles.Layout.base.padding]}>
          <Text style={[ThemeStyles.Front.base]}>
            {I18n.t('button.cancel')}
          </Text>
        </View>
      </Touchable>
    ),
  });

  constructor() {
    super();
    this.validator = new Validator({
      role: [
        {
          required: true,
          message: I18n.t('form.validate.message.role'),
        },
      ],
    });
  }

  onChangeValue = async (value, field) => {
    const {signForm, registerActions} = this.props;
    registerActions.update({[field]: value});
    const dataForm = {
      ...signForm,
      [field]: value,
    };
    try {
      await this.validator.validate(dataForm);
      this.setState({
        allowSubmit: true,
        errors: [],
      });
    } catch (e) {
      this.setState({
        allowSubmit: false,
        errors: e.errors,
      });
    }
  };

  onNext = async () => {
    const {navigation, form} = this.props;
    try {
      await this.validator.validate(form);
      navigation.navigate('Register');
    } catch (e) {
      Toast.show(e.errors[0].message);
    }
  };

  render() {
    const {form} = this.props;
    return (
      <ScrollView
        style={[ThemeStyles.Layout.flex['1']]}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}>
        <View style={ThemeStyles.Layout.base.margin}>
          <Text style={[ThemeStyles.Front.title.largeReg]}>
            {I18n.t('form.label.role')}
          </Text>
        </View>
        <View style={ThemeStyles.Layout.base.mh}>
          <RoleCard
            selected={form.role === UserType.clinic}
            role={UserType.clinic}
            title={I18n.t('form.label.clinic')}
            content={I18n.t('form.label.clinicDesc')}
            thumbnail={require('../../resource/image/clinic.png')}
            onChange={value => this.onChangeValue(value, 'role')}
          />
          <RoleCard
            selected={form.role === UserType.dentist}
            role={UserType.dentist}
            title={I18n.t('form.label.dentist')}
            content={I18n.t('form.label.dentistDesc')}
            thumbnail={require('../../resource/image/dentist.png')}
            onChange={value => this.onChangeValue(value, 'role')}
          />
          <RoleCard
            selected={form.role === UserType.technician}
            role={UserType.technician}
            title={I18n.t('form.label.technician')}
            content={I18n.t('form.label.technicianDesc')}
            thumbnail={require('../../resource/image/technician.png')}
            onChange={value => this.onChangeValue(value, 'role')}
          />
          <RoleCard
            selected={form.role === UserType.provider}
            role={UserType.provider}
            title={I18n.t('form.label.provider')}
            content={I18n.t('form.label.providerDesc')}
            thumbnail={require('../../resource/image/provider.png')}
            onChange={value => this.onChangeValue(value, 'role')}
          />
        </View>
        <View
          style={[ThemeStyles.Layout.base.mh, {marginTop: getRealSize(24)}]}>
          <Button label={I18n.t('button.next')} onPress={this.onNext} />
        </View>
      </ScrollView>
    );
  }
}

const RoleCard = props => {
  return (
    <Touchable onPress={() => props.onChange(props.role)}>
      <View
        style={[
          Styles.cardContainer,
          props.selected && {
            backgroundColor: ThemeStyles.Color.primary.color,
          },
        ]}>
        <View style={Styles.cardContent}>
          <Text
            style={[
              Styles.cardTitle,
              props.selected && {
                color: 'white',
              },
            ]}>
            {props.title}
          </Text>
          <Text
            style={[
              Styles.cardExtra,
              props.selected && {
                color: 'white',
              },
            ]}>
            {props.content}
          </Text>
        </View>
        <Image source={props.thumbnail} style={Styles.cardThumbnail} />
      </View>
    </Touchable>
  );
};

const mapStateToProps = state => ({
  appState: state.appState,
  device: state.device,
  user: state.user,
  token: state.token,
  form: state.registerForm,
});

const mapDispatchToProps = dispatch => ({
  registerActions: bindActionCreators(registerActionCreator, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(SelectRoleScreen);
